<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /**
            将ul里的第一个li设置为红色
        */
        ul >li.first{
            color: darkgreen;
        }

        /**
            伪类（不存在的类，特殊的类）
                - 伪类用来描述一个元素的特殊状态
                    比如：第一个子元素，被点击的元素，鼠标移入的元素。。。
                - 伪类一般情况下都是使用:开头
                    :first-child 第一个子元素
                    :last-child 最后一个元素
                    :nth-child()选中第几个元素
                        特殊值：
                            n第n个
                            2n/even偶数位元素
                            2n+1/odd奇数位元素
                    以上这些都是争对所有子元素进行排序
                    :first-of-type
                    :last-of-type
                    :nth-of-type()
                        - 这几个伪类都是争对相同类型的元素进行处理
                    :not(:nth-child(3)) 除了第几个元素不选择

        */      
        ul>li:first-child{
            color:darkkhaki;
        }

        ul>li:last-child{
            color: greenyellow;
        }

        ul>li:nth-child(3){
            color: rebeccapurple;
        }
        ul>li:nth-of-type(4){
            color: red;
        }
    </style>
</head>
<body>
    
    <ul>
        <li>第零个</li>
        <li class="first">第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
</body>
</html>